<template>
	<view class="">
		<view class="title">
			<view class="search">
				<view class="input">
					<image class="search-img" src="@/static/search23.png"></image>
					<input class="search-input" type="text" v-model="keyword" placeholder="客户电话/姓名" />
				</view>
				<!-- <view style="flex-grow: 1;"></view> -->
				<view class="but" @tap="search">查询</view>
			</view>
			<view class="tab">
				<view :class="{avter:tab==2}" @tap="change(2)">
					全部
				</view>
				<view :class="{avter:tab==0}" @tap="change(0)">
					跟进中
				</view>
				<view :class="{avter:tab==1}" @tap="change(1)">
					已成交
				</view>

			</view>
		</view>

		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" class="pull-scroll">
			<view class="scroll-f">
				<scroll-view scroll-y @scrolltolower="pullUp" class="scroll-view">
					<view class="scroll-empty"></view>
					<view v-for="(item,i) in list" :key="i">
						<customerCard :item="item" :type="1" />
					</view>
					
					<uni-load-more v-show="showLoading" :class="{loadMore: true,'loadEmpty': list.length === 0}" :status="status" :icon-size="12" :content-text="contentText" />

					
				</scroll-view>
			</view>
		</s-pull-scroll>
	</view>

</template>

<script>
	import customerCard from "@/components/customerCard.vue"
	export default {
		data() {
			return {
				showLoading: true,
				status: 'loading', // 与下面一一对应
				contentText: {
					contentdown: '上拉加载更多', // more
					contentrefresh: '加载中', // loading
					contentnomore: '没有更多' // nomore
				},
				list: [],
				keyword: '',
				oldkeyword: '',
				tab: 2,
				page: 1,
				pageSize: 10
			};
		},
		components: {
			customerCard
		},
		computed: {

		},
		// onReachBottom() {
		// 	//if(this.keyword){
		// 	this.private_search()
		// 	// }else{
		// 	//   this.private_list()
		// 	// }
		// },
		methods: {
			pullDown() {
				this.showLoading = false;
				this.status = 'more'
				this.page = 1;
				this.list = [];
				this.private_search()
			},
			
			pullUp() {
				this.private_search()
			},
			
			change(val) {
				if (this.tab == val) {
					return
				}
				this.tab = val;
				this.status = 'more'
				this.page = 1;
				this.list = [];
				// if(this.keyword){
				this.private_search()
				// }else{
				//   this.private_list()
				// }
			},
			
			search() {
				this.status = 'loading'
				this.list = []
				this.private_search()
			},
			
			private_list() {
				if (this.status == 'nomore') {
					return
				}
				this.status = 'loading'
        this.$tokenRequest('/private_list',{
          page: this.page,
          pageSize: this.pageSize,
          follow_status: this.tab == 2 ? null : this.tab
        }).then((res)=>{
          this.showLoading = true
          this.list = [...this.list, ...res.data.list]
          if (this.list.length < res.data.count) {
            this.page++;
            this.status = 'more'
          } else {
            this.status = 'nomore'
          }
        }).catch(()=>{
          setTimeout(() => {
            this.showLoading = true
          	this.$refs.pullScroll.success();
          }, 500)
          this.status = 'nomore'
        })
				// uni.request({
				// 	url: `${this.$http}/api/merchant/private_list`,
				// 	method: "POST",
				// 	header: {
				// 		Authorization: 'Bearer ' + this.$store.state.token
				// 	},
				// 	data: {
				// 		page: this.page,
				// 		pageSize: this.pageSize,
				// 		follow_status: this.tab == 2 ? null : this.tab
				// 	},
				// 	success: (res) => {
				// 		if (res.data.code == 200) {
				// 			this.list = [...this.list, ...res.data.data.list]
				// 			if (this.list.length < res.data.data.count) {
				// 				this.page++;
				// 				this.status = 'more'
				// 			} else {
				// 				this.status = 'nomore'
				// 			}
				// 		}else if(res.data.code == 402 || res.data.code == 506){
    //             setTimeout(()=>{
    //               this.$logout(res.data.msg);
    //             },1500)
    //           } else {
				// 			this.status = 'nomore'
				// 			uni.showToast({
				// 				title: res.data.msg,
				// 				position: 'top',
				// 				icon: 'none',
				// 				duration: 2000
				// 			});
				// 		}
				// 	}
				// })
			},
			private_search() {
				if (this.status == 'nomore') {
					return
				}
				this.status = 'loading';
				if (this.keyword != this.oldkeyword) {
					this.oldkeyword = this.keyword;
					this.page = 1;
					this.list = [];
				}
				console.log("是否继续?", this.$data);
        this.$tokenRequest('/private_search',{
          keyword: this.keyword ? this.keyword : null,
          page: this.page,
          pageSize: this.pageSize,
          follow_status: this.tab == 2 ? null : this.tab
        }).then(res=>{
          setTimeout(() => {
            this.showLoading = true
          	this.$refs.pullScroll.success();
          }, 500)
          console.log('私客列表: ', this.list)
          this.list = [...this.list, ...res.data.list]
          if (this.list.length < res.data.dcount) {
          	this.page++;
          	this.status = 'more'
          } else {
          	this.status = 'nomore'
          }
        }).catch(res=>{
          setTimeout(() => {
            this.showLoading = true
          	this.$refs.pullScroll.success();
          }, 500)
          this.status = 'nomore'
        })
				// uni.request({
				// 	url: `${this.$http}/api/merchant/private_search`,
				// 	method: "POST",
				// 	header: {
				// 		Authorization: 'Bearer ' + this.$store.state.token
				// 	},
				// 	data: {
				// 		keyword: this.keyword ? this.keyword : null,
				// 		page: this.page,
				// 		pageSize: this.pageSize,
				// 		follow_status: this.tab == 2 ? null : this.tab
				// 	},
				// 	success: (res) => {
				// 		this.showLoading = true;
				// 		if (res.data.code == 200) {
				// 			setTimeout(() => {
				// 				this.$refs.pullScroll.success();
				// 			}, 500)
				// 			console.log('私客列表: ', this.list)
				// 			this.list = [...this.list, ...res.data.data.list]
				// 			if (this.list.length < res.data.data.count) {
				// 				this.page++;
				// 				this.status = 'more'
				// 			} else {
				// 				this.status = 'nomore'
				// 			}
				// 		}else if(res.data.code == 402 || res.data.code == 506){
    //             setTimeout(()=>{
    //               this.$logout(res.data.msg);
    //             },1500)
    //           }else {
				// 			setTimeout(() => {
				// 				this.$refs.pullScroll.error();
				// 			}, 500)
				// 			this.status = 'nomore'
				// 			uni.showToast({
				// 				title: res.data.msg,
				// 				position: 'top',
				// 				icon: 'none',
				// 				duration: 500
				// 			});
				// 		}
				// 	}
				// })
			}
		},
		onShow() {
			this.private_list()
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../assets/styles/global";

	.title {
		position: fixed;
		width: 750rpx;
		// #ifdef APP-PLUS
		top: 0rpx;
		// #endif
		// #ifdef H5
		top: 85rpx;
		// #endif
		z-index: 100;
		background-color: #FFFFFF;
	}

	.search {
		@include center;
		justify-content: space-between;
		background-color: #FFFFFF;
		padding: 5px 15px;

		.input {
			@include center;
			justify-content: space-between;
			width: 76%;
			height: 74rpx;
			padding: 10rpx 20rpx;
			border: 2rpx solid #797979;
			border-radius: 20rpx;

			.search-img {
				width: 18px;
				height: 18px;
			}

			.search-input {
				width: 91%;
			}

		}

		.but {
			background-color: #004fbf;
			padding: 0rpx 50rpx;
			border-radius: 20rpx;
			color: #FFFFFF;
			height: 74rpx;
			line-height: 74rpx;
		}
	}

	.tab {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin-bottom: 10px;

		view {
			height: 40px;
			line-height: 40px;
			text-align: center;
			// flex-grow: 1;
			margin: 0 40px;
		}

		.avter {
			color: #004FBF;
			border-bottom: 6rpx solid #004FBF;
		}
	}

	.pull-scroll {
		width: 100%;
		padding-top: 97px;
		background-color: $greyBackgroundColor;
	}

	.scroll-f {
		width: 100%;
		height: calc(100vh - 97px - var(--window-top));
	}

	.scroll-view {
		width: 100%;
		height: 100%;
	}
	
	.scroll-empty{
		width: 100%;
		height: 12px;
	}
	
	.loadEmpty {
		padding-top: calc(100vh/4);
		height: auto;
	}
</style>
